<template>
    <div class="zs_a">
        <div class="zs_b">
            <span>发现</span>
            <div class="zs_img"> 
                <img src="../assets/1.png" alt="">
            </div>
        </div>
        <div class="box-zsq">
            <div class="box-a">
                <router-link to="/mypeng" class="box-ao">
                    <div class="box-a0">
                        <img src="../assets/2.png" alt="">
                    </div>
                    <div class="box-a1">
                         <p>朋友的想法</p>
                    </div>
                </router-link>
            </div>
            <div class="box-b">
                <router-link to="/myxiao" class="box-bo">
                    <div class="box-b0">
                        <img src="../assets/3.png" alt="">
                    </div>
                    <div class="box-b1">
                         <p>小圈子</p>
                    </div>
                </router-link>
            </div>
            <div class="box-c">
                <router-link to="/mymian" class="box-cs">
                    <div class="box-co">
                        <div class="box-cimg">
                            <img src="../assets/4.png" alt="">
                        </div>
                        <div class="box-cp">
                            <p>免费领书</p>
                        </div>
                    </div>
                    <div class="box-c0">
                        <p>《感谢自己...(升级版)》</p>
                    </div>
                </router-link>
            </div>
             <div class="box-d">
                <router-link to="/myfu" class="box-ds">
                    <div class="box-do">
                        <div class="box-dimg">
                            <img src="../assets/5.png" alt="">
                        </div>
                        <div class="box-dp">
                            <p>福利厂</p>
                        </div>
                    </div>
                    <div class="box-d0">
                        <p>邀请好友得3天无限卡</p>
                    </div>
                </router-link>
            </div>
            <div class="box-e">
                <div class="box-es">
                    <div class="box-eo">
                        <div class="box-eimg">
                            <img src="../assets/6.png" alt="">
                        </div>
                        <div class="box-ep">
                            <p>微信听书</p>
                        </div>
                    </div>
                    <div class="box-e0">
                        <p>海量节目.免费畅听</p>
                    </div>
                </div>
                 <div class="box-eimg1">
                    <img src="../assets/7.png" alt="">
                    <img src="../assets/7.png" alt="">
                    <img src="../assets/7.png" alt="">
                </div>
                <div class="box-ep1">
                    <div class="dian">换一批</div>
                </div>
            </div>
        </div>
        <Downbar></Downbar>
    </div>
</template>

<script>
import Downbar from "../components/Downbar.vue"
export default {
    name: 'find',

    data() {
        return {
            
        };
    },
    components:{
        Downbar
    },
    mounted() {
        
    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
    .zs_a{
        width: 100%;
        height: 100%;
        background:#f4f5f7;
        padding-bottom:40%;
          .zs_b{
              width: 100%;
              height:.5rem;
              padding: 8px 0 10px 0;
              display:flex;
              align-items: center;
              justify-content: space-around;
              span{
                  width: 100%;
                  display: inline-block;
                  font-size: .18rem;
                  font-weight: 700;
                  text-align: center;
              }
              .zs_img{
                    width: .3rem;
                    height: 1.5rem;
                    margin-right:10px ;
                  img{
                        width: .3rem;
                        height: .25rem;
                  }
              }
            }
        .box-zsq{
            width:100%;
            .box-a{
                width: 7.30rem;
                height: 1rem;
                background:#fff;
                border-radius: 10px;
                margin: 0 auto;
                display: flex;
               .box-ao{
                   display: flex;
                   align-items: center;
                   margin-left:10px;
                   .box-a0{
                       img{
                        display: block;
                       width: .24rem;
                       height: .24rem;
                       }
                       
                   }
                   .box-a1{
                       display: inline-block;
                       margin-left:5px;
                       font-size: 0.16rem;
                        color: #000;
                   }
               }
            }
            .box-b{
                width: 7.30rem;
                height: 1rem;
                background:#fff;
                border-radius: 10px;
                margin: 0 auto;
                margin-top: 10px;
                display: flex;
               .box-bo{
                   display: flex;
                   align-items: center;
                   margin-left:10px;
                   .box-b0{
                      img{
                       display: block;
                       width:.24rem;
                       height:.24rem;
                      }
                   }
                   .box-b1{
                       display: inline-block;
                       margin-left:5px;
                       font-size: 0.16rem;
                        color: #000;
                   }
               }
            }
            .box-c{
                 width: 7.30rem;
                height: 1rem;
                background:#fff;
                border-radius: 10px;
                margin: 0 auto;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                .box-cs{
                    width:100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .box-co{
                        display: flex;
                    align-items: center;
                    margin-left:10px;
                    .box-cimg{
                      img{
                        display: block;
                        width:.24rem;
                        height: .24rem;
                      }
                    }
                    .box-cp{
                        display: inline-block;
                        margin-left:5px;
                        font-size: 0.16rem;
                        color: #000;
                    }
                    }
                    .box-c0{
                        display: inline-block;
                        font-size: 0.16rem;
                        color: #ccc;
                    }
                }
            }
            .box-d{
                width: 7.30rem;
                height: 1rem;
                background:#fff;
                border-radius: 10px;
                margin: 0 auto;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                .box-ds{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;
                    .box-do{
                        display: flex;
                        align-items: center;
                         margin-left:10px;
                    .box-dimg{
                        img{
                            display: block;
                            width:.24rem;
                            height: .24rem;
                        }
                    }
                    .box-dp{
                        display: inline-block;
                        margin-left:5px;
                        font-size: 0.16rem;
                        color: #000;
                    }
                    }
                    .box-d0{
                        display: inline-block;
                        font-size: 0.16rem;
                            color: #ccc;
                    }
                }
            }
             .box-e{
                width: 7.30rem;
                background:#fff;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin: 0 auto;
                padding:0 .1rem;
                box-sizing: border-box;
                margin-top:10px;
                height:4rem;
                .box-es{
                    display: flex;
                    font-size:.16rem;
                    justify-content: space-between;
                    .box-eo{
                        display: flex;
                        align-items: center;
                        .box-eimg{
                            margin-left: .10rem;
                            margin-right:.10rem;
                            img{
                                display: block;
                                width: 0.24rem;
                                height:0.24rem
                            }
                        }
                    }
                    .box-e0{
                        color: #ccc;
                    }
                }
                .box-eimg1{
                    display: flex;
                    justify-content: space-between;
                    img{
                        width:31%;
                    }
                }
                .box-ep1{
                    margin:0 auto;
                    text-align: center;
                    height:.80rem;
                    line-height:.8rem;
                    width:90%;
                    background:#ccc;
                    border-radius: .15rem;
                    .dian{
                        font-size:.16rem;
                        color:#000;
                    }
                }
                
            }
        }
    }
  
</style>